<template>
  <div class="box">
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入电话号码"
      @select="handleSelect"
    ></el-autocomplete>
    <el-button type="primary" round @click="query">查询</el-button>
    <div class="net">
      <el-descriptions title="用户信息：" :column="3" border>
        <el-descriptions-item
          label="名字"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ item.name }}</el-descriptions-item
        >
        <el-descriptions-item
          label="Telephone"
          label-align="right"
          align="center"
          >{{ item.phone }}</el-descriptions-item
        >
        <el-descriptions-item label="Money" label-align="right" align="center"
          >{{item.money}}元</el-descriptions-item
        >
        <el-descriptions-item
          label="会员"
          label-align="right"
          align="center"
        >
          <el-tag size="small">VIP{{item.vip}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="账号状态" label-align="right" align="center"
          > <el-switch :v-model=item.UserState disabled /></el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="consume">
      <h2>金额：</h2>
      <el-input v-model="money" placeholder="金额" clearable />
      <el-button type="primary" round style="margin-top: 10px" @click="rd">结账</el-button>
    </div>
  </div>
</template>

<script>
import { getphone,rdc,query } from "../api";
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
       restaurants: [],
       state: "",
       timeout: null,
       phone:[],
       money:'',
       reducer:{
           phone:'',
           money:'',
       },
       item:[]
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
     this.reducer.phone=item.value;
    },
    //结账接口
    rd(){
       this.reducer.money=this.money
       rdc(this.reducer).then(res=>{
           ElMessage.success(res.data.data)
       })
    },
    //根据电话号码获取用户信息
    query(){
          query(this.reducer).then(res=>{
            this.item=res.data.data;
          })
    }
  },
  mounted() {
      this.restaurants=this.phone;
  },
  created() {
    getphone().then((res) => {
      for(let i of res.data.data){
          this.phone.push({value: i.phone})
      }
    });
  },
};
</script>

<style scoped>
.box {
  width: 700px;
  height: 500px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 20px;
  border-radius: 10px;
}
.net {
  width: 650px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
}
.consume {
  width: 200px;
  margin: 20px 0 0;
}
</style>